<template>
	<div class="landlord" ref="landlordRef">
		<div class="landlord-content">
			<div :class="data.userMessageCount === 2?'isCanGame landlord-content-start-game':'landlord-content-start-game'" v-if="!data.isStartGame" @click="debounce(()=>{startGame()},200)()">
				<a>
					{{data.userMessageCount === 2?'开始游戏':'邀请人员'}} ({{data.userMessageCount === 2?'座位已坐满':'缺少'+(2 - data.userMessageCount)+'人'}})<br />
				</a>
			</div>
			<div class="landlord-content-left">
				<div class="landlord-content-bottom-is-robbing" v-if="data.isStartGame === 1&&data?.userMessage[0]?.isRobbingPop && data?.userMessage[0]?.isRobbingPop.account === data?.userMessage[0]?.from">
					{{data?.userMessage[0]?.isRobbingPop.flage?'叫地主':'不叫'}}
				</div>
				<div class="landlord-content-bottom-out-cards"  v-if="data.isStartGame === 2&&data?.userMessage[0]?.outCardsPop?.account === data?.userMessage[0]?.from" >
					<img v-if='data?.userMessage[0]?.outCardsPop?.isCards' v-for="item in data?.userMessage[0]?.outCardsPop?.isCards" :src="mapImageUrl(item)" >
					<span v-else>不出</span>
				</div>
				<div class="landlord-content-left-time" v-show="data?.alarmUser === data?.userMessage[0]?.from" >
					<img src="../../assets/image/landlord/alarm.png" >
					<span>{{timing}}</span>
				</div>
				<div class="landlord-content-bottom-person-left">
					<img class="landlord-content-bottom-person-photo-crown" v-if="data?.robbingSelect === data?.userMessage[0]?.from" src="../../assets/image/landlord/crown.png" >
					<span class="landlord-content-bottom-person-photo" :style="{'border':data?.robbingSelect === data?.userMessage[0]?.from?'2px solid rgb(252,291,40)':''}">
						<img v-if="data?.userMessage[0]" :src="data?.userMessage[0]?.avatar" @error="(e)=>{e.target.src = require('../../assets/image/defalut.png')}">
						<img v-else src="../../assets/image/landlord/defalut.png" >
						<i class="landlord-content-bottom-person-photo-homeowner" v-if="data?.robbingSelect !== data?.userMessage[0]?.from&&data.isHomeowner === data?.userMessage[0]?.from && data?.userMessage[0]?.isLine !== 0">房主</i>
						<i class="landlord-content-bottom-person-photo-homeowner" v-if="data?.robbingSelect === data?.userMessage[0]?.from">地主</i>
						<i class="landlord-content-bottom-person-photo-homeowner" v-if="data?.userMessage[0]?.isLine === 0">离线</i>
					</span>
					<div class="landlord-content-bottom-person-left-name" v-if="data?.userMessage[0]" :style="{'width':data?.userMessage[0]?'':'70px'}">
						<strong>{{data?.userMessage[0]?.nickName}}</strong>
						<span v-if="data?.userMessage[0]?.isLine === 0">AI小洁已接管</span>
					</div>
				</div>
				<div class="landlord-content-left-top">
					<div class="landlord-content-bottom-person-left-pulse" v-if="data?.userMessage[0]">
						<img src="../../assets/image/landlord/pulse.png" >
						<strong>{{data?.userMessage[0]?.user_info?.landlord_pulse?data?.userMessage[0]?.user_info?.landlord_pulse:0}}</strong>
					</div>
					<span v-if="data?.userMessage[0]?.cards?.length > 0">
						<img src="../../assets/image/landlord/back.png" >
						<strong>{{data?.userMessage[0]?.cards?.length}}</strong>
					</span>
				</div>
			</div>
			<div class="landlord-content-right">
				<div class="landlord-content-bottom-is-robbing" v-if="data.isStartGame === 1&&data?.userMessage[1]?.isRobbingPop && data?.userMessage[1]?.isRobbingPop.account === data?.userMessage[1]?.from">
					{{data?.userMessage[1]?.isRobbingPop.flage?'叫地主':'不叫'}}
				</div>
				<div class="landlord-content-bottom-out-cards"  v-if="data.isStartGame === 2&&data?.userMessage[1]?.outCardsPop?.account === data?.userMessage[1]?.from">
					<img v-if='data?.userMessage[1]?.outCardsPop?.isCards' v-for="item in data?.userMessage[1]?.outCardsPop?.isCards" :src="mapImageUrl(item)" >
					<span v-else>不出</span>
				</div>
				<div class="landlord-content-left-time" v-show="data?.alarmUser === data?.userMessage[1]?.from" >
					<img src="../../assets/image/landlord/alarm.png" >
					<span>{{timing}}</span>
				</div>
				<div class="landlord-content-bottom-person-left">
					<div class="landlord-content-bottom-person-left-name" v-if="data?.userMessage[1]" :style="{'width':data?.userMessage[1]?'':'70px'}">
						<strong v-if="data?.userMessage[1]">{{data?.userMessage[1]?.nickName}}</strong>
						<span v-if="data?.userMessage[1]?.isLine === 0">AI小洁已接管</span>
					</div>
					<img class="landlord-content-bottom-person-photo-crown" v-if="data?.robbingSelect === data?.userMessage[1]?.from" src="../../assets/image/landlord/crown.png" >
					<span class="landlord-content-bottom-person-photo" :style="{'border':data?.robbingSelect === data?.userMessage[1]?.from?'2px solid rgb(252,291,40)':''}">
						<img v-if="data?.userMessage[1]" :src="data?.userMessage[1]?.avatar" @error="(e)=>{e.target.src = require('../../assets/image/defalut.png')}">
						<img v-else src="../../assets/image/landlord/defalut.png" >
						<i class="landlord-content-bottom-person-photo-homeowner" v-if="data?.robbingSelect !== data?.userMessage[1]?.from&&data.isHomeowner === data?.userMessage[1]?.from && data?.userMessage[1]?.isLine !== 0">房主</i>
						<i class="landlord-content-bottom-person-photo-homeowner" v-if="data?.robbingSelect === data?.userMessage[1]?.from">地主</i>
						<i class="landlord-content-bottom-person-photo-homeowner" v-if="data?.userMessage[1]?.isLine === 0">离线</i>
					</span>
				</div>
				<div class="landlord-content-left-top" :style="data.isStartGame === 0?'left:50px':''">
					<span v-if="data?.userMessage[1]?.cards?.length > 0">
						<img src="../../assets/image/landlord/back.png" >
						<strong>{{data?.userMessage[1]?.cards?.length}}</strong>
					</span>
					<div class="landlord-content-bottom-person-left-pulse" v-if="data?.userMessage[1]">
						<img src="../../assets/image/landlord/pulse.png" >
						<strong>{{data?.userMessage[1]?.user_info?.landlord_pulse?data?.userMessage[1]?.user_info?.landlord_pulse:0}}</strong>
					</div>
					
				</div>
			</div>
			<div class="landlord-content-bottom">
				<div class="landlord-content-bottom-top-content">
					<div class="landlord-content-left-time" v-show="data?.alarmUser === store.state.userInfoX?.account">
						<img src="../../assets/image/landlord/alarm.png" >
						<span>{{timing}}</span>
					</div>
					<div class="landlord-content-bottom-is-robbing" v-if="data.isStartGame === 1&&data.isRobbingPop && data.isRobbingPop.account === store.state.userInfoX?.account">
						{{data.isRobbingPop.flage?'叫地主':'不叫'}}
					</div>
					<div class="landlord-content-bottom-robbing-playCards" v-show="data?.alarmUser === store.state.userInfoX?.account && data.isStartGame === 2">
						<button @click="debounce(()=>{playCardsMain(0)},200)()">不出</button>
						<button @click="debounce(()=>{playCardsMain(1)},200)()">提示</button>
						<button @click="debounce(()=>{playCardsMain(2)},200)()">出牌</button>
					</div>
					<div class="landlord-content-bottom-robbing-landlords" v-show="data?.alarmUser === store.state.userInfoX?.account && data.isStartGame === 1">
						<button @click="debounce(()=>{isRobbing(0)},200)()">不叫</button>
						<button @click="debounce(()=>{isRobbing(1)},200)()">叫地主</button>
					</div>
				<!-- 	<div class="landlord-content-bottom-robbing-landlords">
						<button @click="debounce(()=>{isRobbing(0)},200)()">不叫</button>
						<button @click="debounce(()=>{isRobbing(1)},200)()">叫地主</button>
					</div> -->
					<div class="landlord-content-bottom-out-cards" v-if="data.isStartGame === 2&&data?.alarmUser !== store.state.userInfoX?.account&&data.outCardsPop?.account === store.state.userInfoX?.account">
						<img v-if='data.outCardsPop?.isCards' v-for="item in data.outCardsPop?.isCards" :src="mapImageUrl(item)" >
						<span v-else>不出</span>
					</div>
				</div>
				<div class="landlord-content-bottom-cards" v-if="data.myCards.length  > 0">
					<img @click="outCardsClick(item)" :class="{'activeCards animateCards':data.selectCards.indexOf(item) > -1}" v-for="item in data.myCards" :src="mapImageUrl(item)" >
				</div>
				<div class="landlord-content-bottom-person">
					<div class="landlord-content-bottom-person-left">
						<img class="landlord-content-bottom-person-photo-crown" v-if="data?.robbingSelect === store.state.userInfoX?.account" src="../../assets/image/landlord/crown.png" >
						<span class="landlord-content-bottom-person-photo" :style="{'border':data?.robbingSelect === store.state.userInfoX?.account?'2px solid rgb(252,291,40)':''}">
							<img :src="store.state.userInfoX?.avatar" @error="(e)=>{e.target.src = require('../../assets/image/defalut.png')}">
							<i class="landlord-content-bottom-person-photo-homeowner" v-if="data?.robbingSelect !==  store.state.userInfoX?.account&&data.isHomeowner === store.state.userInfoX?.account">房主</i>
							<i class="landlord-content-bottom-person-photo-homeowner" v-if="data?.robbingSelect ===  store.state.userInfoX?.account">地主</i>
						</span>
						<div class="landlord-content-bottom-person-left-name">
							<strong>{{store.state.userInfoX?.nickName}}</strong>
						</div>
						<div class="landlord-content-bottom-person-left-pulse">
							<img src="../../assets/image/landlord/pulse.png" >
							<strong>{{data.myUserInfo?.landlord_pulse?data.myUserInfo?.landlord_pulse:0}}</strong>
						</div>
					</div>
					<div class="landlord-content-bottom-person-right">
						<div class="landlord-content-bottom-person-right-count">
							<span>倍</span>
							<strong>{{data.multiple}}</strong>
						</div>
					</div>
					<div class="landlord-content-bottom-person-right">
						<div class="landlord-content-bottom-person-right-count">
							<span>底</span>
							<strong>{{data.score}}</strong>
						</div>
					</div>
					<div class="landlord-content-bottom-person-voice">
						<sendGameMessage v-model:roomId="data.roomId"></sendGameMessage>
					</div>
					
				</div>
			</div>
			<div class="landlord-content-top" v-if="data.labdlordCardsArray?.length > 0">
			    <img v-show="!data?.robbingSelect" v-for="item in 3" src="../../assets/image/landlord/back.png" >
				<img v-show="data?.robbingSelect" v-for="item in data.labdlordCardsArray" :src="mapImageUrl(item)" >
			</div>
			<!-- 发牌动画操作 -->
			<div class="landlord-content-animate" ref="animateRef" v-if="data.cardsCount > 0">
				<img v-for="item in data.cardsCount" :style="{'marginLeft':-item/10+'px','marginTop':item/3+'px'}" src="../../assets/image/landlord/back.png" >
			</div>
			<!-- 提示 -->
			<div class="cards-tip" v-show="data.tipText">
				{{data.tipText}}
			</div>
			<div class="room-desc">
				<p>WEB技术研究群专属斗地主</p>
				房间号：{{data.roomId?data.roomId:88888888}} 底分：{{data.score}}
			</div>
			<div class="landlord-win" v-if="data.landlordWinShow">
				<div :class="data.isWin === '失败'?'lost landlord-win-text':'win landlord-win-text'">{{data.isWin}}</div>
				<div class="landlord-win-table">
					<span>昵称</span>
					<span>积分</span>
					<span>倍数</span>
					<span>金豆</span>
				</div>
				<div class="landlord-win-body" v-for="item in data.winData">
					<span>{{item.nickName}}</span>
					<span>{{item.score}}</span>
					<span>{{item.multiple}}</span>
					<span>{{item.pulse}}</span>
				</div>
				<button @click="data.landlordWinShow = false,data.isStartGame = 0,data.outCardsPop = null">继续游戏</button>
			</div>
		</div>
	</div>
</template>

<script lang="ts" setup>
	import { ref,onMounted,reactive,inject,onBeforeUnmount,watch,onUnmounted,nextTick } from 'vue'
	import { useRouter,onBeforeRouteUpdate } from 'vue-router';
	import { ElMessage,ElMessageBox} from 'element-plus'
	import {debounce,gameTimeMain} from '../../public/common'
	import { playAudio } from '../main/webServer'
	import {useTiming} from '../main/useChessboard.ts'
	import {useLandlord} from '../main/useLandlord.ts'
	import {HttpGetOtherinfo} from '../../public/http'
	import bus from '../../public/bus'
	import sendGameMessage from '../children/sendGameMessage.vue'
	
	import { sendMessage } from "../main/webServer"
	import moment from 'moment'
	const store = inject('store')
	let router = useRouter()
	let {randomCards,reorderCards,mapImageUrl,seachRepeatSort,isConformTo,isStraight,separateSeachRepeatSort,compareCards,sliceArray} = useLandlord()
	let timing = ref<number>(0)
	const animateRef = ref<HTMLElement>();
	let data = reactive({
		cardsArray:[],
		labdlordCardsArray:[], //地主牌
		userMessage:[],//保存用户所有信息
		userMessageCount:0,
		userDetailMessage:[],
		roomId:null,
		alarmUser:null,
		seatIndex:null,
		isHomeowner:null,
		isStartGame:0, //未开始游戏，1：叫地主 2：开始游戏
		isShowStartButton:false,
		myUserInfo:null,
		saveRoomData:[],
		isRobbingArray:null,
		isRobbingPop:null,//是否叫地主数据
		myCards:[],
		myCards1:[],
		robbingSelect:'',//地主
		outCardsPop:null,//谁出牌了，出的什么牌
		outCardsArray:null,//记录全部出牌的数据
		selectCards:[],
		leaveData:null,
		animateCardsArray:[],
		cardsCount:0,
		isStartPlaying:0,
		tipText:'',
		tipTime:null,
		winData:[],//胜利失败信息
		isWin:'失败',//是否胜利
		landlordWinShow:false,
		multiple:2,
		score:100,
		cardsTime:35, //出牌时间
		
	})
	
	// 监听值
	bus.on('info',async (value:any)=>{
		let info = JSON.parse(value)
		// console.log(info,data.roomId)
		if(info.to == store.state.userInfoX.account){
			if(info.infoType == 'agree'){
			
			}else if(info.infoType == 'updateUser' && data.roomId === info.roomId){
				data.isStartGame = info.isStartGame?info.isStartGame:0
				bus.emit('hideUserList')
				updateUserInfo(info)
				if(data.userMessageCount === 2){
					data.saveRoomData = info.userMessage
				}else{
					if(data?.userMessage.length === 0){
						userLost(1)
					}
				}
			}else if(info.infoType == 'startGame' && data.roomId === info.roomId){
				updateUserInfo(info)
				// 开始计算地主是否出现
				if(info?.isRobbingArray.length === 3){
					// 地主简单算法,后面更新
					let account = null
					let nickName = null
					info.isRobbingArray.forEach((v)=>{
						if(v.flage){
							account = v.account
							nickName = v.nickName
						}
					})
					if(account){
						data.alarmUser = null
						useTiming(0)
						console.log('地主确定')
						openTip(`恭喜${nickName}成为地主！`)
						if(data.isHomeowner === store.state.userInfoX?.account){
							let message = {
								infoType:'startCardsGame',//开始游戏
								to:store.state.userInfoX.account,
								roomId:data.roomId,
								isHomeowner:data.isHomeowner,
								alarmUser:account,
								isStartGame:2,
								robbingSelect:account,
								cardsArray:data.cardsArray
							}
							let result = sendMessage(message)
							if(result){
								
							}
						}
						
					}else{
						useTiming(0)
						data.cardsCount = 0
						data.isStartPlaying = 0
						data.myCards = []
						openTip(`没有人选择地主，将重新选择！`)
						if(data.isHomeowner === store.state.userInfoX?.account){
							saveGameStart()
							console.log('重新选择')
						}
						
					}
					return
				}
				// 轮流抢地主
				useTiming(10,(count)=>{
				  timing.value = count
				  data.alarmUser = info.alarmUser
				  if(count === 1){
					useTiming(0)
					if(data.alarmUser === store.state.userInfoX?.account){
						isRobLandlord(info)
					}
					automaticPlaying(info)
				  }
				})
				
				
			}else if(info.infoType == 'startCardsGame' && data.roomId === info.roomId){
				updateUserInfo(info)
				useTiming(data.leaveData?.from === info.alarmUser?5:data.cardsTime,(count)=>{
				  timing.value = count
				  data.alarmUser = info.alarmUser
				  if(count === 1){
					useTiming(0)
					if(data.alarmUser === store.state.userInfoX?.account){
						noPlayingCards(1)
					}
					automaticPlaying(info)
				  }
				})
			}else if(info.infoType == 'gameOver' && data.roomId === info.roomId){
				gameOver(info)
			}else if(info.infoType == 'refuse'){
				ElMessage({
					message: info.nickName+"拒绝了你的请求！",
					type: 'warning',
				})
			}else if(info.infoType == 'leave'){
				openTip((info.lost_user?info.lost_user.nickName:info.nickName)+"离开了房间")
			}else if(info.infoType == 'gameMessage' && data.roomId === info.roomId){
				openTip(info.content)
				if(info.content.indexOf('快点吧，我等的花儿都谢了') > -1){
					playAudio(6)
				}else if(info.content.indexOf('面对疾风吧') > -1){
					playAudio(7)
				}
			}
		}
		
	})
	// 判断是否已经在房间还被其他人邀请
	bus.on('isOtherRoom',()=>{
		if(data.roomId){
			userLost()
		}
	})
	// 监听用户掉线
	bus.on('update',(r:any)=>{
		if(data.roomId && data.userMessage.length > 0){
			for(let i = 0;i < data.userMessage.length;i++){
				if(data.userMessage[i].from === r.user && r.type === 0){
					let info = {
						infoType:'leave',//离开信息
						to:store.state.userInfoX.account,
						roomId:data.roomId,
						isHomeowner:data.isHomeowner,
						isStartGame:data.isStartGame,
						lost_user:{
							user:r.user,
							nickName:data.userMessage[i].nickName
						}
					}
					let result = sendMessage(info)
					if(result){
						
					}
					
				}
			}
		}
	})
	
	// 判断是否有人离线,AI接管出牌
	const automaticPlaying = (info)=>{
		
		if(data.leaveData?.from === data.alarmUser){
			console.log(data.isStartGame)
			if(data.isStartGame === 1){
				if(info?.isRobbingArray.length > 0 && info.isRobbingArray[info.isRobbingArray.length - 1].account === store.state.userInfoX?.account){
					isRobLandlord(info,true)
				}else if(info?.isRobbingArray.length === 0){
					openTip("房主已离线，房间自动解散")
					userLost()
				}
			}else if(data.isStartGame === 2){
				if(info?.outCardsArray.length > 0 && info.outCardsArray[info.outCardsArray.length - 1].account === store.state.userInfoX?.account){
					noPlayingCards(1,info)
				}else if(info?.isRobbingArray.length === 0){
					openTip("房主已离线，房间自动解散")
					userLost()
				}
			}
		}
	}

	// 更新用户信息
	const updateUserInfo = (info)=>{
		let userBefore = []
		let userAfter = []
		let isUseSelf = 0
		data.landlordWinShow = false
		data.userMessageCount = info?.userMessage.length - 1
		if(info.infoType == 'startGame'){
			data.isStartGame = info.isStartGame
			data.isRobbingArray = info.isRobbingArray
			data.isRobbingPop = info.isRobbingArray[info.isRobbingArray.length - 1]
			data.cardsArray = info.cardsArray
			data.outCardsPop = null
			data.labdlordCardsArray = info.labdlordCardsArray
			if(data.isRobbingPop){
				openTip(data.isRobbingPop?.flage?'抢地主':'不抢')
			}
		}else if(info.infoType == 'startCardsGame'){
			if(!data.robbingSelect){
				data.isRobbingArray = info.isRobbingArray
				data.isRobbingPop = info.isRobbingArray
				data.isStartGame = info.isStartGame
				
				data.robbingSelect = info.robbingSelect
				
			}
			data.cardsArray = info.cardsArray
			if(info.outCardsArray){
				data.outCardsArray = info.outCardsArray
				let outCards = Object.assign([],info.outCardsArray) 
				let outPopCards = outCards.pop()
				if(outPopCards.account === store.state.userInfoX.account){
					data.outCardsPop = outPopCards
					openTip(data.outCardsPop.name?data.outCardsPop.name:'不出')
				}
				
			}
		}
		let lostCount = 0
		info?.userMessage.forEach((r,i)=>{
			if(!r){
				--data.userMessageCount
			}
			if(r.isLine === 0){
				data.leaveData = r
				lostCount++
			}
			if(r.from === store.state.userInfoX.account){
				isUseSelf = 1
				data.isHomeowner = r.isHomeowner
				if(!data.isStartPlaying && info.isStartGame === 1){
					data.cardsCount = 54
					data.isStartPlaying = 1
					nextTick(()=>{
						let childNodes = Array.prototype.slice.call(animateRef.value.childNodes)
						childNodes = childNodes.slice(1,childNodes.length - 1)
						let childNodesSliceArray = sliceArray(childNodes,17)
						
						cardsAnimate(0,childNodesSliceArray[0],"animateLeft")
						cardsAnimate(0,childNodesSliceArray[1],"animateRight")
						cardsAnimate(0,childNodesSliceArray[2],"animateBottom")
						cardsAnimate(0,childNodesSliceArray[3],"animateTop")
					})
					setTimeout(()=>{
						data.myCards = reorderCards(r.cards?r.cards:[])
						data.cardsCount = 0
						
					},1000)
				}else{
					data.myCards = reorderCards(r.cards?r.cards:[])
					
				}
				// data.myCards = reorderCards(r.cards?r.cards:[])
				
				if(data.myCards.length === 0 && data.isStartGame === 2){
					let message = {
						infoType:'gameOver',//开始游戏
						to:store.state.userInfoX.account,
						roomId:data.roomId,
						isHomeowner:data.isHomeowner,
						alarmUser:null,
						isStartGame:0,
						isRobbingArray:[],
						cardsArray:[],
						win:{
							account:store.state.userInfoX.account,
							nickName:store.state.userInfoX.nickName,
						},
						message:info?.userMessage
					}
					let result = sendMessage(message)
					if(result){
						
					}
				}
			}else{
				if(!isUseSelf){
					userBefore.push(r)
				}else{
					userAfter.push(r)
				}
			}
		})
		data.userMessage = userBefore.reverse().concat(userAfter.reverse())
		if(data.userMessage.length === 2 && info.outCardsArray){
			let outCards = Object.assign([],info.outCardsArray)
			outCards.reverse()
			let count = 0
			for(let i = 0;i < outCards.length;i++){
				for(let j = 0;j < data.userMessage.length;j++){
					if(data.userMessage[j].from === outCards[i]?.account){
						data.userMessage[j].outCardsPop = outCards[i]
						count++
						break
					}
				}
				if(count === 2){
					break
				}
			}
			
		}else if(data.userMessage.length === 2&&info.isRobbingArray){
			let isRobbingArrayCards = Object.assign([],info.isRobbingArray)
			isRobbingArrayCards.forEach((v)=>{
				for(let j = 0;j < data.userMessage.length;j++){
					if(data.userMessage[j].from === v.account){
						data.userMessage[j].isRobbingPop = v
						break
					}
				}
			})
		}
		if(data.userMessage[0].isStartGame){
			data.userMessage[0].isStartGame = data.isStartGame
		}
		
		sessionStorage.setItem('userMessage',JSON.stringify(data.userMessage))
		if(lostCount === 2 && data.isStartGame >=1){
			openTip("离线人数过多，房间自动解散！")
			userLost()
			
		}
	}
	
	// 游戏结束恢复原始数据
	const gameOver = (info)=>{
		let winCopyDta = Object.assign([],data.saveRoomData)
		let recombination = []
		let isLabdlordWin = info.win.account === data.robbingSelect?true:false //地主是否胜利
		let sendUserData = []
		data.winData = []
		winCopyDta.forEach((v)=>{
			let pulseSwitch = 0
			let multiple = 0
			if(isLabdlordWin){
				if(data.robbingSelect === v.from){
					pulseSwitch = data.multiple * data.score
					multiple = data.multiple
				}else{
					pulseSwitch = -data.multiple * data.score/2
					multiple = data.multiple/2
				}
			}else{
				if(data.robbingSelect === v.from){
					pulseSwitch = -data.multiple * data.score
					multiple = data.multiple
				}else{
					pulseSwitch = data.multiple * data.score/2
					multiple = data.multiple/2
				}
			}
			recombination.push({
				nickName:v.from,
				score:data.score,//底分
				multiple:multiple,//倍数
				pulse:pulseSwitch//扣分
			})
			let sendScore = v.user_info.landlord_pulse?Number(v.user_info.landlord_pulse) + (pulseSwitch):pulseSwitch
			sendUserData.push({
				account:v.from,
				score:sendScore
			})
		})
		if(isLabdlordWin){
			if(store.state.userInfoX.account === data.robbingSelect){
				data.isWin = "胜利"
				playAudio(11)
			}else{
				data.isWin = "失败"
				playAudio(12)
			}
		}else{
			if(store.state.userInfoX.account === data.robbingSelect){
				data.isWin = "失败"
				playAudio(12)
			}else{
				data.isWin = "胜利"
				playAudio(11)
			}
		}
		data.winData = recombination
		data.landlordWinShow = true
		
		
		data.outCardsPop.isCards = data.myCards
		data.isRobbingPop = null
		data.robbingSelect = ''
		data.outCardsArray = null
		data.myCards = []
		data.alarmUser = null
		data.labdlordCardsArray = []
		data.leaveData = null
		data.multiple = 2
		data.cardsCount = 0
		data.isStartPlaying = 0
		useTiming(0)
		console.log(sendUserData)
		data?.userMessage.forEach((v)=>{
			v.outCardsPop.isCards = reorderCards(v.cards)
			v.cards = []
			sendUserData.forEach((m)=>{
				if(v.from === m.account){
					v.user_info.landlord_pulse = m.score
				}
				if(m.account === store.state.userInfoX.account){
					data.myUserInfo.landlord_pulse = m.score
				}
			})
			
		})
		if(store.state.userInfoX.account === data.isHomeowner){
			// 发送数据更新豆子
			let info = {
				infoType:'updateScore',//邀请信息
				to:store.state.userInfoX.account,
				gameName:'欢乐斗地主',
				gameUrl:'/landlord',
				roomId:data.roomId,
				sendUserData:sendUserData
			}
			let result = sendMessage(info)
			if(result){
				
			}
		}else if(data.isHomeowner === data.leaveData?.from){
			// 发送数据更新豆子
			let info = {
				infoType:'updateScore',//邀请信息
				to:store.state.userInfoX.account,
				gameName:'欢乐斗地主',
				gameUrl:'/landlord',
				roomId:data.roomId,
				sendUserData:sendUserData
			}
			let result = sendMessage(info)
			if(result){
				
			}
		}
		
		
	}
	// 邀请弹框
	const inviteClick = (index)=>{
		bus.emit('openUserList',data.userMessage)
	}
	// 邀请发送
	bus.on('inviteClick',(item)=>{
		item = JSON.parse(item)
		data.isHomeowner = data.isHomeowner?data.isHomeowner:store.state.userInfoX.account
		data.roomId = data.roomId?data.roomId:moment().valueOf()
		let info = {
			infoType:'invite',//邀请信息
			to:item.account,
			gameName:'欢乐斗地主',
			gameUrl:'/landlord',
			roomId:data.roomId,
			isHomeowner:data.isHomeowner,
		}
		let result = sendMessage(info)
		if(result){
			ElMessage({
				message: "已给对方发送邀请！",
				type: 'success',
			})
		}
	})
	// 接收同意信息
	bus.on('agreeMessage',()=>{
		
		agreeMessageMain()
		
	})
	// 接收同意信息合并
	
	const agreeMessageMain = ()=>{
		let from = store.state.battleInfoX?.from
		let info = {
			infoType:'agree',//同意信息
			to:from,
			gameName:'欢乐斗地主',
			gameUrl:'/landlord',
			roomId:store.state.battleInfoX?.roomId,
			isHomeowner:store.state.battleInfoX?.isHomeowner,
		}
		let result = sendMessage(info)
		if(result){
			data.roomId = store.state.battleInfoX?.roomId
			data.isHomeowner = store.state.battleInfoX?.isHomeowner
		}
	}
	bus.on('clear',()=>{
		userLost()
	})
	// 用户各种原因掉线,发送给房间其他人员
	const userLost = (type,updateMessage)=>{
		if(data.userMessage.length > 0 && !type){
			data.userMessage.forEach((v)=>{
				let info = {
					infoType:'leave',//离开信息
					to:v.from,
					roomId:data.roomId,
					isHomeowner:data.isHomeowner,
					isStartGame:data.isStartGame
				}
				let result = sendMessage(info)
				if(result){
					
				}
			})
		}else if(updateMessage){
			updateMessage.forEach((v)=>{
				let info = {
					infoType:'leave',//离开信息
					to:v.from,
					roomId:v.roomId,
					isHomeowner:v.isHomeowner,
					isStartGame:updateMessage[0].isStartGame
				}
				let result = sendMessage(info)
				if(result){
					
				}
			})
		}else{
			
		}
		data.roomId = null
		data.isHomeowner = null
		data.userMessage = []
		data.myCards = []
		data.alarmUser = null
		data.isStartGame = 0
		data.userMessageCount = 0
		data.labdlordCardsArray = []
		data.cardsCount = 0
		data.isStartPlaying = 0
		data.robbingSelect = ''
		data.leaveData = null
		data.multiple = 2
		data.cardsCount = 0
		data.isStartPlaying = 0
		useTiming(0)
		store.commit('battleInfoMain',null)
		sessionStorage.removeItem('userMessage')
	}
	// 开始游戏
	const startGame = ()=>{
		if(!data.myUserInfo?.landlord_pulse || Number(data.myUserInfo?.landlord_pulse) <= 0){
			openTip("您的金币不足100,请前去赚取金币（发布一篇技术类文章）")
			return
		}
		let count = 0
		data?.userMessage.forEach((v)=>{
			if(v.user_info?.landlord_pulse === 0){
				count++
			}
		})
		if(count > 0){
			openTip("队友游戏不足，无法开始游戏！")
			return
		}
		if(data.userMessageCount < 2){
			inviteClick()
			return
		}
		if(data.isHomeowner !== store.state.userInfoX.account){
			openTip("您不是房主，不可以开始游戏")
			return
		}
		saveGameStart()
		
	}
	// 保留游戏开始操作,防止地主没抢成功
	
	const saveGameStart = ()=>{
		// 游戏开始
		data.isStartGame = 1
		let cardsArray = randomCards()
		data.cardsArray = cardsArray
		let info = {
			infoType:'startGame',//开始游戏
			to:store.state.userInfoX.account,
			roomId:data.roomId,
			isHomeowner:data.isHomeowner,
			alarmUser:store.state.userInfoX.account,
			isStartGame:1,
			isRobbingArray:[],
			cardsArray:cardsArray
		}
		let result = sendMessage(info)
		if(result){
			
		}
	}
	// 是否抢地主
	const isRobbing = (type)=>{
		isRobLandlord(type)
	}
	// 记录谁抢地主,谁没抢
	const isRobLandlord = (info,isLost)=>{
		console.log(1111111)
		let returnRobbingArray = data.isRobbingArray.find((v)=>{
			return v.account === (!isLost?store.state.userInfoX?.account:info.alarmUser)
		})
		console.log(returnRobbingArray)
		if(returnRobbingArray){
			return
		}
		useTiming(0)
		data.isRobbingArray = data.isRobbingArray.concat([{
			  account:info?.alarmUser?info?.alarmUser:store.state.userInfoX?.account,
			  flage:info?.alarmUser?false:info?true:false,
			  nickName:info?.alarmUser?info?.nickName:store.state.userInfoX?.nickName,
		}])
		let nextAlarmUser = currentWhoCards(info?.alarmUser?info?.alarmUser:data.alarmUser)
		let message = {
			infoType:'startGame',//开始游戏
			to:store.state.userInfoX.account,
			roomId:data.roomId,
			isHomeowner:data.isHomeowner,
			alarmUser:nextAlarmUser,
			isStartGame:1,
			isRobbingArray:data.isRobbingArray,
			cardsArray:data.cardsArray
		}
		let result = sendMessage(message)
		if(result){
			data.alarmUser = ""
		}
	}
	// 当前轮到谁出牌
	const currentWhoCards = (alarmUser)=>{
		
		let index = -1
		data.saveRoomData.find((r,i)=>{
			if(r.from === alarmUser){
				
				if(i === data.saveRoomData.length - 1){
					index = 0
				}else{
					index = i + 1
				}
				
			}
		})
		return data.saveRoomData[index]?.from
	}
	// 判断是否一轮已经过去
	const isAround = ()=>{
		let result = false
		if(data.outCardsArray && data.outCardsArray.length > 0){
			let outCardsArray = Object.assign([],data.outCardsArray)
			outCardsArray.reverse()
			for(let i = 0;i < outCardsArray.length;i++){
				if(outCardsArray[i].isCards && i < 2){
					result = outCardsArray[i]
					break
				}
			}
		}
		return result
	}
	// 是否出牌
	const playCardsMain = (type)=>{
		if(!type){
			// 不出
			noPlayingCards()
		}else if(type === 1){
			let result = isAround()
			if(!result){
				openTip('你是先手玩家，无需提示！')
				return
			}
			let compareResult = compareCards(data.myCards,result.isCards,true,result.name)
			if(compareResult.length > 0){
				data.selectCards = compareResult[0]
			}else{
				openTip('你没有牌大过对方！')
			}
			
		}else{
			let cardsSort = seachRepeatSort(data.selectCards) //排序
			let cardConform = isConformTo(cardsSort) //检测是否符合规则
			if(!cardConform){
				openTip('你选择的牌不符合规则！')
				data.selectCards = []
				return
			}
			let result = isAround()
			
			if(result){
				let compareResult = compareCards(cardsSort,result.isCards,false,result.name)
				if(compareResult.length === 0){
					openTip('你选择的牌无法大过对方！')
					return
				}
				
			}
			
			outCardsSend(cardsSort,cardConform.name)
		}
		
	}
	// 不出判断
	const noPlayingCards = (isCards)=>{
		if(isCards === 1){
			// 自动不出
			let result = isAround()
			if(!result){
				// 先手玩家,自动出牌
				if(data.alarmUser === data.leaveData?.from){
					data.selectCards = []
					setTimeout(()=>{
						outCardsSend(data.leaveData?.cards[data.leaveData?.cards.length - 1],'单牌')
					},200)
				}else{
					data.selectCards = [data.myCards[data.myCards.length - 1]]
					setTimeout(()=>{
						outCardsSend(data.selectCards,'单牌')
					},200)
				}
				
			}else{
				let compareResult = null
				if(data.alarmUser === data.leaveData?.from){
					compareResult = compareCards(data.leaveData?.cards,result.isCards,false,result.name)
				}else{
					compareResult = compareCards(data.myCards,result.isCards,false,result.name)
				}
				if(compareResult.length === 0){
					openTip('你的牌无法大过对方！')
					outCardsSend()
					return
				}else{
					let cardsSort = seachRepeatSort(compareResult[0]) //排序
					let cardConform = isConformTo(cardsSort) //检测是否符合规则
					if(data.alarmUser === data.leaveData?.from){
						data.selectCards = []
						setTimeout(()=>{
							outCardsSend(cardsSort,cardConform.name)
						},200)
					}else{
						data.selectCards = cardsSort
						setTimeout(()=>{
							outCardsSend(data.selectCards,cardConform.name)
						},200)
					}
					
					
				}
			}
		}else if(!isCards){
			// 手动选择不出
			let result = isAround()
			if(!result){
				openTip('你是先手玩家，必须出牌！')
				return
			}else{
				outCardsSend()
			}
		}
	}
	// 出牌发送的数据
	const outCardsSend = (isCards,name)=>{
		let outCardsArray = []
		if(data.outCardsArray){
			outCardsArray = Object.assign([],data.outCardsArray)
			outCardsArray.push({
				account:data.alarmUser===data.leaveData?.from?data.leaveData?.from:store.state.userInfoX.account,
				isCards:isCards,
				name:name
			})
		}else{
			outCardsArray = [{
				account:store.state.userInfoX.account,
				isCards:isCards,
				name:name
			}]
		}
		let account = currentWhoCards(data.alarmUser)
		let message = {
			infoType:'startCardsGame',//开始游戏
			to:data.alarmUser===data.leaveData?.from?data.leaveData?.from:store.state.userInfoX.account,
			roomId:data.roomId,
			isHomeowner:data.isHomeowner,
			alarmUser:account,
			isStartGame:2,
			robbingSelect:data.robbingSelect,
			cardsArray:data.cardsArray,
			outCardsArray:outCardsArray
		}
		let result = sendMessage(message)
		if(result){
			
			data.selectCards = []
			data.alarmUser = ""
		}
	}
	// 选择牌
	const outCardsClick = (card)=>{
		if(data.alarmUser === store.state.userInfoX.account && data.isStartGame === 2){
			let index = data.selectCards.indexOf(card)
			if(index > -1){
				data.selectCards.splice(index,1)
			}else{
				data.selectCards.push(card)
			}
			playAudio(8)
		}
	}
	const cardsAnimate = (i,cards,calssName)=>{
		if(i < cards.length){
			cards[i].classList.add(calssName);
			setTimeout(()=>{
				i++
				cardsAnimate(i,cards,calssName)
			},100)
		}
	}
	const openTip = (tipText)=>{
		
		let tipSwitch = {
			'单牌':"小单一张",
			'对子':"小对两张",
			'王炸':"我来王炸，管不住了吧",
			'三张不带':"三张不带了",
			'炸弹':"看我炸弹压不死你",
			'三带一':"三张带一张",
			'三带二':"三张带一对",
			'四带二':"炸弹带两张，任性吧！",
			'连对':"小小连对有人管到没",
			'顺子':"看我顺风顺水顺桃花",
			'飞机':"飞机带翅膀喽",
			'抢地主':'我来抢地主',
			'不抢':'唉！牌不行你们抢吧！',
			'不出':'要不起'
		}
		
		if(!tipText){
			return
		}
		if(data.tipTime){
			clearTimeout(data.tipTime)
		}
		if(tipText === '不抢'){
			playAudio(14)
		}else if(tipText === '抢地主'){
			playAudio(15)
		}else if(tipText === '王炸'){
			playAudio(10)
		}else if(tipText === '不出'){
			playAudio(13)
		}
		if(tipSwitch[tipText]){
			data.tipText = tipSwitch[tipText]
			if(tipText === '炸弹' || tipText === '王炸'){
				data.multiple = data.multiple * 2
			}
		}else{
			data.tipText = tipText
		}
		data.tipTime = setTimeout(()=>{
			data.tipText = ''
		},3000)
	}
	const beforeunload = ()=>{
		return false
	}
	onMounted(async ()=>{
		let cardsArray = randomCards()
		data.myCards1 = cardsArray.sliceResult[0]
		// data.labdlordCardsArray = cardsArray.sliceResult[3]
		// setTimeout(()=>{
		// 	data.cardsArray = reorderCards(data.cardsArray)
		// 	console.log(data.cardsArray )
		// },2000)
		if(store.state.battleInfoX){
			agreeMessageMain()
		}
		let result = await HttpGetOtherinfo({email:store.state.userInfoX?.account})
		data.myUserInfo = result?.data
		if(!data.myUserInfo?.landlord_pulse || Number(data.myUserInfo?.landlord_pulse) <= 0){
			openTip("您的金币不足100,请前去赚取金币（发布一篇技术类文章）")
		}
		// data.selectCards = ['hearts5','clubs5']
		// let cardsSort = seachRepeatSort(data.selectCards) //排序
		// let cardConform = isConformTo(cardsSort) //检测是否符合规则
		
		// let cards = [
		// 	'clubs8','diamonds5','hearts5',
		// 	'clubs10','diamonds10','clubs10',
		// 	'diamonds12','clubs12'
		// ]
		// let cardsSort = seachRepeatSort(cards) //排序
		// console.log('cardsSort',cardsSort)
		// let compareResult = compareCards(cardsSort,data.selectCards,false,'对子')
		// console.log('compareResult',compareResult)
		// console.log(compareResult,cardsSort,cardConform)
		
		window.onbeforeunload = beforeunload()
		let userMessage = sessionStorage.getItem('userMessage')
		if( userMessage && !store.state.battleInfoX){
			userLost([],JSON.parse(userMessage))
		}
		setTimeout(()=>{
			playAudio(9)
		},1000)
		
		
		
	})
	onBeforeUnmount(()=>{
		playAudio(3)
		bus.off('inviteClick')
		bus.off('info')
		bus.off('agreeMessage')
		bus.off('clear')
		if(data.userMessage.length > 0){
			userLost()
		}
	})
</script>

<style lang="scss">
	.landlord{
		width: 100%;
		height: calc(100%);
		background-color: white;
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
		background: url(../../assets/image/landlord/background2.jpg) no-repeat;
		background-size: cover;
		background-position: bottom;
		.landlord-content-bottom-person-photo{
			position: relative;
			box-sizing: border-box;
			box-shadow: 0 5px 10px #2db2ff;
			&::after{
				content: "";
				width: 100%;
				height: 100%;
				position: absolute;
				left: 0px;
				top: 0px;
				border-right: 0;
				transform: rotate(0);
				z-index: 1;
				border-radius: 60%;
				border-left: 3px solid #c234e0;
				animation: animatePhotoBottom 5s infinite;
				
			}
			&::before{
				content: "";
				width: 100%;
				height: 100%;
				position: absolute;
				right: 0px;
				top: 0px;
				border-right: 0;
				transform: rotate(0);
				z-index: 1;
				border-radius: 60%;
				border-right: 3px solid #34e0bc;
				
				animation: animatePhotoUp 5s  infinite
			}
			@keyframes animatePhotoBottom {
			    0% {
			        transform: rotate(0);
			    }
			    100% {
			        transform: rotate(360deg);
					
			    }
			}
			@keyframes animatePhotoUp {
			    0% {
			        transform: rotate(0);
			    }
			    100% {
			        transform: rotate(-360deg);
					
			    }
			}
			.landlord-content-bottom-person-photo-homeowner{
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
				background-color: rgba(0,0,0,0.5);
				font-size: 16px;
				color: rgb(249, 171, 8);
				font-style:inherit;
				text-align: center;
				line-height: 60px;
			}
		}
		
		.landlord-content-start-game{
			position: absolute;
			left: 0;
			right: 0;
			bottom: 0;
			top: 0;
			margin: auto;
			width: 250px;
			height: 50px;
			background: rgb(249, 171, 8);
			text-align: center;
			line-height: 30px;
			color: white;
			font-size: 13px;
			border-radius: 50%;
			cursor: pointer;
			display: flex;
			justify-content: center;
			align-items: center;
			&:hover{
				&::after{
					top: 0;
					height: 50%;
					width: 80%;
					border-radius: 30px;
				}
				&::before{
					bottom: 0;
					height: 50%;
					width: 80%;
					border-radius: 30px;
					top: auto;
				}
				a::before {
				    transform: skewX(45deg) translate(200px);
				}
			}
			&::after{
				content: "";
				position: absolute;
				left: 50%;
				transform: translatex(-50%);
				bottom: -5px;
				width: 30px;
				height: 10px;
				background: #f00;
				border-radius: 10px;
				transition: .5s;
				transition-delay: .5;
				background: #2db2ff;
				box-shadow: 0 0 5px #2db2ff, 0 0 15px #2db2ff, 0 0 30px #2db2ff, 0 0 60px #2db2ff;
			}
			&::before{
				content: "";
				position: absolute;
				left: 50%;
				transform: translatex(-50%);
				top: -5px;
				width: 30px;
				height: 10px;
				background: #f00;
				border-radius: 10px;
				transition: .5s;
				background: #2db2ff;
				box-shadow: 0 0 5px #2db2ff, 0 0 15px #2db2ff, 0 0 30px #2db2ff, 0 0 60px #2db2ff;
			}
			a{
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				background: rgba(255,255,255,0.05);
				box-shadow: 0 15px 15px rgba(0,0,0,0.3);
				border-bottom: 1px solid rgba(255,255,255,0.1);
				border-top: 1px solid rgba(255,255,255,0.1);
				border-radius: 30px;
				text-decoration: none;
				overflow: hidden;
				color: #fff;
				font-weight: 400px;
				z-index: 1;
				transition: .5s;
				backdrop-filter: blur(15px);
				&::before{
					content: "";
					position: absolute;
					top: 0;
					left: 0;
					width: 50%;
					height: 100%;
					background: linear-gradient(to left,rgba(255,255,255,0.15),transparent);
					transform: skewX(45deg) translate(0);
					transition: .5s;
					filter: blur(0px);
				}
			}
			
			span{
				color: #aaa;
				font-size: 12px;
				letter-spacing: 1px;
				text-shadow: none;
				
				display: block;
			}
		}
		.isCanGame{
			&::after{
				top: 0;
				height: 50%;
				width: 80%;
				border-radius: 30px;
			}
			&::before{
				bottom: 0;
				height: 50%;
				width: 80%;
				border-radius: 30px;
				top: auto;
			}
			a::before {
			    transform: skewX(45deg) translate(200px);
			}
		}
		.landlord-content-left-top{
			height: 30px;
			line-height: 30px;
			font-size: 16px;
			margin: auto;
			position: absolute;
			left: 50px;
			top: -6px;
			display: flex;
			justify-content: space-between;
			align-items: flex-end;
			span{
				width: 35px;
				height: 44px;
				display: block;
				position: relative;
				margin-left: 20px;
				&:before{
					width: 100%;
					height: 100%;
					content: "";
					position: absolute;
					left: 0;
					top: 0;
					background: rgba(0,0,0,0.3);
					z-index: 1;
				}
				
				img{
					width: 100%;
					height: 100%;
					position: absolute;
					left: 0;
					top: 0;
					
				}
				strong{
					width: 100%;
					text-align: center;
					line-height: 44px;
					z-index: 2;
					position: relative;
					color: white;
					display: block;
				}
			}
			.landlord-content-bottom-person-left-pulse{
				width: 50px;
				height: 30px;
				border-radius: 15px;
				color: white;
				background: rgba(0,0,0,0.3);
				display: flex;
				flex-direction: column;
				padding: 0 20px;
				position: relative;
				margin-left: 20px;
				strong{
					color: rgb(249, 171, 8);
					text-align: center;
					font-weight: bold;
				}
				img{
					position: absolute;
					left: -10px;
					top: 0;
					bottom: 0;
					margin: auto;
					height: 35px;
					transform: rotate(130deg);
				}
			}
			
		}
		.landlord-content-left-time{
			position: absolute;
			left: 0;
			right: 0;
			top: -50px;
			margin: auto;
			width: 35px;
			height: 35px;
			border-radius: 60%;
			text-align: center;
			line-height: 35px;
			font-size: 16px;
			color: white;
			img{
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
			}
			span{
				position: relative;
				text-align: center;
				line-height: 40px;
				color: white;
				font-size: 13px;
				font-weight: bold;
			}
			
		}
		.landlord-content-bottom-person{
			display: block;
			margin-top: 20px;
			display: flex;
			justify-content: space-between;
			.landlord-content-bottom-person-left{
				display: flex;
				align-items: flex-end;
				cursor: pointer;
				position: relative;
				.landlord-content-bottom-person-photo-crown{
					width: 60px;
					position: absolute;
					top: -30px;
					left: 0;
				}
				.landlord-content-bottom-person-photo{
					width: 60px!important;
					height: 60px!important;
					border-radius: 60%;
					overflow: hidden;
					display: block;
					z-index: 1;
					img{
						width: 100%;
						height: 100%;
						object-fit: cover;
					}
					strong{
						display: flex;
						flex-direction: column;
						text-align: center;
						font-size: 16px;
						color: white;
					}
					&:hover{
						opacity: 0.8;
					}
				}
				.landlord-content-bottom-person-left-name{
					height: 30px;
					padding: 0 10px;
					border-radius: 15px;
					color: white;
					background: rgba(0,0,0,0.3);
					width: 120px;
					display: flex;
					flex-direction: column;
					margin-left: 10px;
					position: relative;
					strong{
						color: white;
						font-size: 13px;
						font-weight: 500;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						line-height: 30px;
						text-align: center;
					}
					&:hover{
						opacity: 0.8;
					}
					span{
						position: absolute;
						left: 0;
						top: 0;
						width: 100%;
						height: 100%;
						color: #2db2ff;
						background-color: rgba(0,0,0,0.8);
						border-radius: 15px;
						text-align: center;
						line-height: 30px;
						
					}
				}
				.landlord-content-bottom-person-left-pulse{
					@extend .landlord-content-bottom-person-left-name;
					width: auto;
					min-width: 70px;
					padding: 0 20px;
					position: relative;
					margin-left: 20px;
					strong{
						color: rgb(249, 171, 8);
						text-align: center;
						font-weight: bold;
					}
					img{
						position: absolute;
						left: -10px;
						top: 0;
						bottom: 0;
						margin: auto;
						height: 35px;
						transform: rotate(130deg);
					}
					
				}
				
			}
			.landlord-content-bottom-person-voice{
				display: flex;
				align-items: flex-end;
				input{
					background: rgba(0,0,0,0.3);
					border: 0;
					color: white;
				}
			}
			.landlord-content-bottom-person-right{
				display: flex;
				align-items: flex-end;
				.landlord-content-bottom-person-right-count{
					min-width: 70px;
					height: 30px;
					padding: 0 10px;
					border-radius: 15px;
					color: white;
					background: rgba(0,0,0,0.3);
					display: flex;
					flex-direction: column;
					margin-left: 10px;
					position: relative;
					span{
						width: 30px;
						height: 30px;
						border-radius: 50%;
						background: linear-gradient(to bottom, #f9ab08, #2f5894);
						box-shadow: 0 0 1px 0 rgb(47,88,148);
						position: absolute;
						left: -10px;
						top: 0;
						bottom: 0;
						margin: auto;
						text-align: center;
						line-height: 30px;
						font-size: 16px;
						font-family: cursive;
					}
					strong{
						color: white;
						font-size: 16px;
						font-weight: 500;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						line-height: 30px;
						text-align: center;
						color: rgb(249, 171, 8);
						font-weight: bold;
					}
				}
			}
		}
		
		.landlord-content{
			width: 95%;
			height: calc(100%);
			position: relative;
			.landlord-content-left{
				@extend .landlord-content-bottom-person;
				position: absolute;
				left: 0px;
				top: 32%;
				height: max-content;
				.landlord-content-bottom-person-photo-crown{
					top: -30px!important;
				}
				.landlord-content-bottom-out-cards{
					width: 100%;
					display: flex;
					flex-wrap: nowrap;
					align-items: flex-start;
					justify-content: flex-start;
					position: absolute;
					top: -20px;
					left: 232px;
					z-index: 1;
					img{
						width: 60px;
						margin-left: -35px;
						box-shadow: 0 0 5px 0 #aaa;
						&:nth-of-type(1){
							margin: 0;
						}
					}
					span{
						color: rgb(249, 171, 8);
						font-size: 16px;
						font-family: cursive;
					}
				}
				.landlord-content-bottom-is-robbing{
					@extend .landlord-content-bottom-out-cards;
					color: white;
					font-size: 16px;
					font-family: cursive;
				}
			}
			.landlord-content-right{
				@extend .landlord-content-bottom-person;
				position: absolute;
				right: 0;
				top: 32%;
				height: max-content;
				.landlord-content-bottom-person-photo-crown{
					top: -30px!important;
					right: 0!important;
					left: auto!important;
				}
				.landlord-content-bottom-person-left{
					justify-content: flex-end;
					.landlord-content-bottom-person-left-name{
						margin: 0;
						margin-right: 10px;
					}
				}
				.landlord-content-left-top{
					left: -10px!important;
					span{
						margin-right: 20px;
						margin-left: 0;
					}
					.landlord-content-bottom-person-left-pulse{
						margin-left: 0!important;
						img{
							left: auto;
							right: -10px;
							transform: rotate(-30deg);
						}
					} 
				}
				.landlord-content-bottom-out-cards{
					width: 100%;
					display: flex;
					flex-wrap: nowrap;
					align-items: flex-start;
					justify-content: flex-end;
					position: absolute;
					top: -20px;
					right: 232px;
					z-index: 1;
					img{
						width: 60px;
						margin-left: -35px;
						box-shadow: 0 0 5px 0 #aaa;
						&:nth-of-type(1){
							margin: 0;
						}
					}
					span{
						color: rgb(249, 171, 8);
						font-size: 16px;
						font-family: cursive;
					}
				}
				.landlord-content-bottom-is-robbing{
					@extend .landlord-content-bottom-out-cards;
					color: white;
					font-size: 16px;
					font-family: cursive;
				}
			}
			.landlord-content-bottom{
				width: 100%;
				position: absolute;
				bottom: 16px;
				.landlord-content-bottom-top-content{
					position: absolute;
					top: -232px;
					left: 0;
					width: 100%;
					display: flex;
					justify-content: center;
					align-items: center;
					.landlord-content-bottom-robbing-landlords{
						width: max-content;
						display: flex;
						flex-wrap: nowrap;
						align-items: flex-start;
						justify-content: center;
						
						z-index: 1;
						button{
							width: 80px;
							height: 30px;
							background: rgb(249, 171, 8);
							text-align: center;
							line-height: 30px;
							color: white;
							font-size: 16px;
							border-radius: 5px;
							cursor: pointer;
							border: 0;
							margin-right: 30px;
							&:nth-of-type(1){
								background: #aaa;
							}
							&:nth-of-type(2){
								margin: 0;
							}
						}
					}
					.landlord-content-bottom-robbing-playCards{
						@extend .landlord-content-bottom-robbing-landlords;
						button{
							&:nth-of-type(1){
								background: #aaa;
							}
							&:nth-of-type(2){
								margin-right: 30px;
								background: rgb(255,77,77);
							}
							&:nth-of-type(3){
								margin: 0!important;
							}
						}
					}
					.landlord-content-bottom-out-cards{
						width: max-content;
						display: flex;
						flex-wrap: nowrap;
						align-items: flex-start;
						justify-content: center;
						// margin-bottom: ;
						img{
							width: 60px;
							margin-left: -30px;
							box-shadow: 0 0 5px 0 #aaa;
							&:nth-of-type(1){
								margin: 0;
							}
						}
						span{
							color: rgb(249, 171, 8);
							font-size: 16px;
							font-family: cursive;
						}
					}
					.landlord-content-bottom-is-robbing{
						@extend .landlord-content-bottom-out-cards;
						color: white;
						font-size: 16px;
						position: static!important;
						font-family: cursive;
					}
					.landlord-content-left-time{
						position: relative!important;
						top: auto!important;
						margin: inherit!important;
						margin-right: 10px!important;
					}
				}
				
				.landlord-content-bottom-cards{
					width: 100%;
					display: flex;
					flex-wrap: nowrap;
					align-items: flex-start;
					justify-content: center;
					position: absolute;
					top: -129px;
					img{
						width: 85px;
						margin-left: -9%;
						box-shadow: 0 0 5px 0 #aaa;
						animation: animateCards 1s forwards;
						&:nth-of-type(1){
							margin: 0;
						}
					}
					.activeCards{
						margin-top: -30px!important;
					}
					.animateCards{
						animation: animateCards 3s forwards
					}
					@keyframes animateCards {
					    0% {
					       margin-left: -9%;
					    }
					    100% {
					        margin-left: -30px;
					    }
					}
				}
				
				
			}
			.landlord-content-top{
				width: 170px;
				position: absolute;
				top: 10px;
				left: 0;
				right: 0;
				margin: auto;
				padding: 5px;
				background: rgba(0,0,0,0.3);
				border-radius: 3px;
				display: flex;
				justify-content: space-between;
				img{
					width: 50px;
					box-shadow: 0 0 5px 0 #aaa;
					animation: animateTopCards 5s forwards;
					opacity: 0;
					
				}
				
				@keyframes animateTopCards {
				    0% {
				       opacity: 0;
				    }
				    100% {
				        opacity: 1;
				    }
				}
			}
			.landlord-content-animate{
				position: absolute;
				top: 30%;
				left: 0;
				right: 0;
				margin: auto;
				width: 100%;
				height:100%;
				transform-style: preserve-3d;
				img{
					width: 80px;
					position: absolute;
					left: 46%;
					right: 0;
					top: 0;
					margin: auto;
					transform: rotateX(60deg);
					display:black;
				}
				.animateLeft{
					animation: animateLeft 1s forwards
				}
				.animateRight{
					animation: animateRight 1s forwards
				}
				.animateBottom{
					animation: animateBottom 1s forwards
				}
				.animateTop{
					animation: animateTop 1s forwards
				}
				@keyframes animateLeft {
				    0% {
				        left: 46%;
				    }
					90% {
					    opacity: 1;
					}
				    100% {
				        left: 5%;
						
				    }
				}
				@keyframes animateRight {
				    0% {
				        left: 46%;
				    }
					90% {
					    opacity: 1;
					}
				    100% {
				        left: 95%;
						
				    }
				}
				@keyframes animateBottom {
				    0% {
				        top: 0;
				    }
					90% {
					    opacity: 1;
					}
				    100% {
				        top: 40%;
						
				    }
				}
				@keyframes animateTop {
				    0% {
				        top: 0;
				    }
					90% {
					    opacity: 1;
					}
				    100% {
				        top: -33%;;
						
				    }
				}
			}
		}
		button{
			font-size: 13px!important;
			border-radius: 60%;
			box-shadow: 
			0 0 10px 0 rgba(0,0,0,0.5) inset,
			0 10px 10px 0 rgba(0,0,0,0.2);
			text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
			position: relative;
			border-radius: 0!important;
			&::after{
				content: "";
				position: absolute;
				left: 0;
				top: 0;
				width: 0;
				height: 100%;
				background-color: #2db2ff;
				box-shadow: 0 0 2px #2db2ff, 0 0 7px #2db2ff, 0 0 15px #2db2ff, 0 0 30px #2db2ff;
				transition: .5s;
				opacity: 0.3;
			}
			&::before{
				content: "";
				position: absolute;
				right: 0;
				top: 0;
				width: 0;
				height: 100%;
				background-color: #2db2ff;
				box-shadow: 0 0 2px #2db2ff, 0 0 7px #2db2ff, 0 0 15px #2db2ff, 0 0 30px #2db2ff;
				transition: .5s;
				opacity: 0.3;
			}
			&:hover{
				&::after{
					width: 100%;
				}
				&::before{
					width: 100%;
				}
			}
		}
		.cards-tip{
			position: relative;
			left: 0;
			top: 30%;
			bottom: 0;
			right: 0;
			margin: auto;
			min-width: 150px;
			max-width: max-content;
			height: 35px;
			border-radius: 2px;
			box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.2);
			padding: 0 10px;
			box-sizing: border-box;
			text-align: center;
			line-height: 35px;
			color: #fff;
			font-size: 13px;
			z-index: 8;
			background: rgba(0,0,0,0.3);
		}
		.landlord-win{
			position: relative;
			left: 0;
			top: 30%;
			bottom: 0;
			right: 0;
			margin: auto;
			width: 800px;
			height: 300px;
			background:linear-gradient(to right,rgba(0,0,0,0),rgba(16,96,148,1),rgba(0,0,0,0));
			z-index: 8;
			padding-top: 60px;
			.landlord-win-text{
				position: absolute;
				left: 0;
				top: -30px;
				width: 100%;
				text-align: center;
				font-size: 70px;
				width: 100%;
				font-family: cursive; 
				color: transparent;
				background-clip: text;
				font-weight: bold;
			}
			.win{
				text-shadow: 2px 2px 2px rgba(255,255,255,0.2);
				background-image: linear-gradient(to bottom, rgba(255, 255, 255,1), rgba(250, 164, 52));
				color: transparent;
				background-clip: text;
			}
			.lost{
				color: transparent;
				text-shadow: 2px 2px 2px rgba(255,255,255,0.2);
				background-image: linear-gradient(to bottom, rgba(255, 255, 255,1), #bdceff);
				background-clip: text;
			}
			.landlord-win-table{
				background:linear-gradient(to right,rgba(0,0,0,0),rgba(16,96,148,1),rgba(0,0,0,0));
				width: 50%;
				height: 35px;
				display: flex;
				justify-content: space-between;
				line-height: 35px;
				color: #fff;
				opacity: 0.5;
				text-align: center;
				margin:0 auto;
				font-size: 14px;
				span{
					width: calc(100% / 4);
					 white-space: nowrap; 
					 overflow: hidden;
					 text-overflow: ellipsis;
					 display: inline-block;
					 text-align: center;
				}
			}
			.landlord-win-body{
				@extend .landlord-win-table;
				font-size: 13px;
				opacity: 1;
			}
			button{
				width: 120px;
				height: 35px;
				background: rgb(249, 171, 8);
				text-align: center;
				line-height: 35px;
				color: white;
				font-size: 16px;
				border-radius: 60%;
				cursor: pointer;
				border: 0;
				margin: 0 auto;
				display: block;
				margin-top: 50px;
			}
		}
		.room-desc{
			position: absolute;
			left: 0;
			right: 0;
			top: 30%;
			margin: auto;
			width: max-content;
			color: #fff;
			opacity: 0.1;
			font-size: 20px;
			transform: rotateX(19deg);
			letter-spacing: 1px;
			font-family: cursive;
			text-align: center;
		}
	}
</style>
